<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #click {
        background-color: pink;
        width: 100px;
        height: 100px;
        position: relative;
        left: 100px;
    }

    pre {
        font-size: 26px;
        font-weight: bolder;
    }
</style>
<body>

<pre>
知识点:
    setInterval: 设置时间间隔
    offsetLeft: 左边 + 100px
    wef
    we
</pre>


<div id="click">click it</div>


</body>

<script>

    var timer = null;

    var clickDiv = document.getElementById("click");

    clickDiv.onmouseover = function () {    // 鼠标进来触发
        startMove();
    };

    clickDiv.onmouseout = function () {
        alert("鼠标出去触发事件.....")
    };

    function startMove() {
        clearInterval(timer);   // 清除所有的定时器 去掉有bug
        timer = setInterval(function () {
            if (clickDiv.offsetLeft > 800) {   // 判断是否到了指定的位置,停止移动
                clearInterval(timer);       // 停止移动
            } else {
                clickDiv.style.left = clickDiv.offsetLeft + 10 + "px"; // 1000毫秒 == 1秒
            }
        }, 50);

    }


</script>
</html>